<template>
	<!-- 内容 -->
	<div id="single_list_vue" class="content content-height1"
		style="background: rgb(245, 247, 250); padding-top: 20px;">
		<div class="t_a1">
			<div class="course-a"><span>首页 &gt; </span> <span>阅读剑雅真题A类</span> </div>
			<div id="middle_content">
				<div id="middle_left2" style="width: 910px;">
					<div v-if="state.showLoading"
						style="width: 60px; margin: 0px auto; height: 400px; justify-content: center; align-items: center;">
						<img src="../assets/loading.gif"
							style="width: 100px; margin: 0px auto; top: -200px; flex-shrink: 0;">
					</div>
					<template v-for="(item,index) in state.list" :key="index">
						<div class="single-content-all">
							<div class="single-content-in1" style="padding-right: 10px;">
								<div class="single-content-title">IELTS</div>
								<div class="single-content-title2">{{item.name}}</div>
							</div>
							<div class="single-content-in">
								<template v-for="(v,k) in item.mockPaperList" :key="k">
									<div class="single-content-card">
										<div class="single-content-card-top">
											<div class="single-content-card-top-in">
												<div class="mockTest" style="font-weight: 600;">
													{{v.name}}
												</div>
												<!-- <div class="mockTest1">
													完成{{v.completeNum?v.completeNum:0}}/{{v.questionNum}}
												</div> -->
											</div>
										</div>
										<div class="single-content-card-bottom">
											<template v-for="(i,j) in v.mockPaperList" :key="j">
												<div class="single-content-card-bottom-in">
													<span>
														<div class="single-content-card-bottom-in-left">

														</div>
													</span>
													<div class="single-content-card-bottom-in-right"
														style="color: black;">
														<div @click="toReadTest(i.paperType,i.paperId)" id="part_1543"
															sid="1543" class="single-content-card-bottom-in-right1"
															style="font-size: 13px;">
															{{state.examTypeList[i.paperType]}}
														</div>
														<div id="state2_1543" sid="1543"
															class="single-content-card-bottom-in-right2">
															<template v-if="i.examType">
																<span class="single-content-card-bottom-title"
																	v-for="(a,b) in i.examType.split(',')" :key="b"
																	style="font-size: 13px;">{{state.examTypeList[a]}}&nbsp;</span>
															</template>
															<!-- <span id="tip_1543" style="color: red;">完成0/13</span> -->
														</div>
													</div>
												</div>
											</template>
										</div>
									</div>
								</template>
							</div>
						</div>
					</template>
				</div>
				<div id="middle_right" class="" style="margin-top: 0px;">
					<AsidePart :test='1'></AsidePart>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
	import AsidePart from "./asidePart.vue"
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	const router = useRouter()
	const route = useRoute()
	import {
		reactive,
		getCurrentInstance,
		onMounted
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()
	const state = reactive({
		showLoading: false,
		list: [],
		examTypeList: {
			'1': 'LISTENING',
			'2': 'READING',
			'3': 'SPEAKING',
			'4': 'WRITING'
		},
		examTypeIndex: 0,
		content: '',
		examListConten: ''
	})

	const examTypeChange = (index) => {
		state.examTypeIndex = index
	}

	const toReadTest = (type, id) => {
		let query = {
			id: id
		}
		if (type == 1) {
			router.push({
				path: '/home/ListeningPractice',
				query
			})
		} else if (type == 2) {
			router.push({
				path: '/home/readTest',
				query
			})
		} else if (type == 3) {
			router.push({
				path: '/home/SpeechMockExam'
			})
		} else if (type == 4) {
			proxy.$http.get('/boot/api/questions/paper/queryById?id=' + id).then(res => {
				let obj = res.data.result.examList[0]
				state.content = obj
				obj.contentText =
					`<style> *[wi100dth='wi100dth']{width:100% !important;height:auto !important;}</style>` +
					obj
					.contentText
				obj.contentText = obj.contentText.replace(/\<img/g, '<img wi100dth="wi100dth"')
				obj.contentText = obj.contentText.replace(/\<table/g, '<table wi100dth="wi100dth"')
				state.examListConten = obj
				localStorage.setItem('WriteTest', JSON.stringify(state.examListConten))
			})
			router.push({
				path: '/home/WriteTest',
				query: {
					yw_wd: 2
				}
			})
		}
	}

	function getqueryById(id) {
		proxy.$http.get('/boot/api/questions/paper/queryById?id=' + id).then(res => {
			let obj = res.data.result.examList[0]
			state.content = obj
			obj.contentText =
				`<style> *[wi100dth='wi100dth']{width:100% !important;height:auto !important;}</style>` + obj
				.contentText
			obj.contentText = obj.contentText.replace(/\<img/g, '<img wi100dth="wi100dth"')
			obj.contentText = obj.contentText.replace(/\<table/g, '<table wi100dth="wi100dth"')
			state.examListConten = obj
		})
	}

	const getList = () => {
		state.showLoading = true;
		proxy.$http.get('/boot/api/questions/academic/listDryRun?mockType=1&column=serialNo&order=desc').then(res => {
			if (res.data.success) {
				let arr = res.data.result
				arr.forEach((item, index) => {
					if (item.mockPaperList.length) {
						arr[index].mockPaperList.forEach((v, k) => {
							let examTypes = ''
							let num = 0
							if (v.mockPaperList.length) {
								v.mockPaperList.forEach((a, b) => {
									num += a.questionNum
									if (a.examType) {
										if (examTypes.length) {
											examTypes = examTypes + ',' + a.examType
										} else {
											examTypes = a.examType
										}
									}
								})
							}
							arr[index].mockPaperList[k].questionNum = num
							arr[index].mockPaperList[k].examTypes = examTypes
							if (!arr[index].examTypes) {
								arr[index].examTypes = examTypes
							} else {
								arr[index].examTypes = arr[index].examTypes + ',' + examTypes
							}
						})
					}
				});
				state.list = arr
				state.showLoading = false;
			}
		})
	}

	getList()
</script>
<style lang="scss" scoped>
	[v-cloak] {
		display: none;
	}

	/*修改滚动条样式*/
	div::-webkit-scrollbar {
		width: 10px;
		height: 10px;
		/**/
	}

	div::-webkit-scrollbar-thumb {
		background: #bfbfbf;
		border-radius: 10px;
	}

	div::-webkit-scrollbar-thumb:hover {
		background: #333;
	}

	.searchButton {
		width: 80px;
		height: 100%;
		background-color: #ff4b40;
		color: white;
		border-radius: 0px 10px 10px 0;
	}

	.search {
		border: 1px solid #f5f7fa;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
	}

	div.search input:nth-child(2) {
		border: none !important;
		outline: none !important;
	}

	input[type="checkbox"]:not(.switch):after {
		width: 5.5px !important;
		left: 5.5px !important;
		outline: none !important;
	}

	input[type="checkbox"],
	input[type="radio"] {
		--active-inner: #aaaaaa !important;
		outline: none !important;
	}

	input[type="checkbox"]:checked,
	input[type="radio"]:checked {
		background: #e4ecfa00 !important;
		border-color: #9999 !important;
		outline: none !important;
	}

	input[type="checkbox"],
	input[type="radio"] {
		--input-border: #9999 !important;
		outline: none !important;
	}

	input[type="checkbox"]:not(.switch) {
		border-radius: 3px !important;
		outline: none !important;
	}

	div.search input:nth-child(3) {
		border: none !important;
	}

	.titlefont {
		display: flex;
		font-size: 3px;
		width: 50px;
		color: #999999;
	}

	.s1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 100px;
		padding-left: 3%;
		color: black;
		display: inline-block;
		width: 180px;
	}

	.s2 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 80px;
		padding-left: 3%;
		color: #999999 !important;
		display: inline-block;
	}

	.top {
		text-align: center;
	}

	.left {
		float: left;
		width: 60px;
	}

	.right {
		float: right;
		width: 60px;
	}

	.bottom {
		clear: both;
		text-align: center;
	}

	.item {
		margin: 4px;
	}

	.left .el-tooltip__popper,
	.right .el-tooltip__popper {
		padding: 8px 10px;
	}

	.topicin {
		display: flex;
		width: 215px;
		display: flex;
		/* justify-content: center; */
		align-items: center;
		border: 1px solid #f5f7fa;
		padding: 1%;
		margin: 0px -1px -1px 0px;
		justify-content: space-between;
	}

	.topic-list1 {
		background: #ffffff;
		box-shadow: 0 2px 20px 0 #f2f2f2;
		border-radius: 0 6px 6px 6px;
		padding-top: 20px;
		padding-bottom: 30px;
	}

	.topic-list {
		background: #ffffff;
		border-radius: 0 6px 6px 6px;
		padding-top: 20px;
		padding-bottom: 30px;
	}

	.oral_title {
		color: #2d2c2c;
	}

	.topic-list .qt_btn {
		font-size: 15px;
		color: #2d2c2c;
	}

	.qt_btn_active {
		color: #ffffff !important;
	}

	.sg_or {
		box-shadow: 0 2px 4px 0 rgb(47 55 68 / 10%);
		border-radius: 6px 0 0 6px;
		font-size: 14px;
		color: #333333;
		width: 34px;
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 15px;
		cursor: pointer;
		margin-bottom: 2px;
		position: absolute;
		margin-left: -33px;
		background-color: white;
	}

	.single-type-a div {
		background: #f5f7fa;
	}

	.single-type-active div {
		background: #ff4b40;
		border-radius: 4px;
		width: 30px;
		height: 4px;
		margin: 1rem auto 0 auto;
	}

	.qt_btn1 {
		text-align: center;
		border: 1px solid #e6ecf2;
		width: 80px;
		height: 34px;
		line-height: 30px;
		margin-right: 0px;
		padding: 0px 0px;
		background-color: #ffffff;
		color: #24272b;
		font-size: 14px;
		display: inline-block;
		cursor: pointer;
		min-width: 60px;
		text-align: center;
		margin: 0px -1px -1px 0px;
	}

	.qt_btn_active1 {
		border-radius: 0px;
		background-color: #ffefee;
		color: #ff4b40;
	}

	.start {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}

	.flex {
		display: flex;
		justify-content: space-between;
	}

	.single-content-all {
		/* display: flex; */
		min-height: 230px;
		background: #ffffff;
		margin-bottom: 20px;
		color: #333333;
	}

	.single-content-in1 {
		width: 100%;
		height: 60px;
		color: #333333;
		display: flex;
		align-items: center;
		padding-left: 20px;
		box-sizing: border-box;
	}

	.single-content-in {
		width: 100%;
		/* background: #383838; */
		box-shadow: 0 0 8px 0 #e7eaf0;
		border-radius: 18px;
		min-height: 120px;
		display: flex;
		flex-wrap: wrap;
	}

	.single-content-title {
		font-family: SourceHanSansCN-Heavy;
		font-size: 16px;
		/* padding: 20px 0px 0px 10px; */
		font-weight: 600;
		margin-right: 20px;
	}

	.single-content-title1 {
		width: 80px;
		font-family: SourceHanSansCN-Medium;
		font-size: 13px;
		color: #766ea5;
		text-align: center;
		height: 66px;
		padding: 0px 0px 0px 10px;
	}

	.single-content-title12 {
		color: #567faf !important;
	}


	.single-content-title2 {
		font-family: SourceHanSansCN-Heavy;
		font-size: 16px;
		color: #766ea5;
		text-align: center;
		font-weight: 600;
	}

	.single-content-card {
		width: 23.8%;
		height: 240px;
		background: #ffffff;
		box-shadow: 0 4px 20px 0 rgb(0 0 0 / 5%);
		border-radius: 8px;
		border-radius: 8px;
		margin: 20px 5px;
	}

	.single-content-card-top-in {
		display: flex;
		/* justify-content: space-around; */
		width: 150px;
		justify-content: space-between;
	}

	/*div{*/
	/*border: 1px solid black;*/
	/*}*/
	#middle_content {
		margin-left: 15px;
		margin-left: -5px;
	}

	.single-content-card-top {
		width: 100%;
		height: 48px;
		background: rgb(245, 247, 250);
		border-radius: 8px 8px 0 0;
		padding: 0 10px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		color: #333333;
	}

	.single-content-card-top2 {
		background: #759ecd !important;
	}

	.single-content-card-bottom {
		height: 205px;
		/*width: 165px;*/
	}

	.single-content-card-bottom-in {
		display: flex;
		align-items: center;
		width: 95%;
		margin: 0 auto;
		padding: 5px;
		border-width: 0 0 1px 0;
		border-style: solid;
		border-color: #edf2f7;
		padding: 3%;
		margin-top: 3px;
		min-height: 45px;
	}

	.single-content-card-bottom-in1 {
		display: flex;
		width: 95%;
		margin: 0 auto;
		padding: 5px;
	}

	.single-content-card-bottom-in-left {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #766ea5;
	}

	.single-content-card-bottom-in-right {
		width: 90%;
	}

	.single-content-card-bottom-in-right2 {
		font-family: SourceHanSansCN-Regular;
		font-family: -apple-system;
		font-size: 10px;
		color: #999999;
		padding-left: 10px;
	}

	.single-content-attach {
		color: red;
	}

	.single-content-card-bottom-in-right1 {
		cursor: pointer;
		padding-left: 10px;
		width: 149px;
		font-size: 10px;
		display: block;
		word-break: keep-all;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		-icab-text-overflow: ellipsis;
		-khtml-text-overflow: ellipsis;
		-moz-text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
	}

	.single-content {
		overflow: initial;
	}

	.single-content-card-bottom-title {
		margin-right: 6px;
	}

	/*div{*/
	/*border:1px solid black;*/
	/*}*/

	.close_banner {
		font-size: 0.45rem;
		border-radius: 21px;
		color: rgb(70, 68, 68);
		float: right;
		border: 1px solid rgb(123, 118, 118);
		margin-bottom: -15px;
		margin-right: -15px;
		width: 31px;
		position: relative;
		background-color: #fbf6f6;
		padding-top: 5px;
	}

	.textNormal {
		margin-left: 335px;
		display: inline-block;
		font-size: 14px;
	}

	.textNormal>a {
		background-color: #ffefee;
		color: #ff4b40;
		padding: 8px 10px;
		text-decoration: none;
		border-radius: 5px;
	}

	.anna-code {
		text-align: center;
		position: absolute;
		/*width: 200px;*/
		/* background-color: white;
             box-shadow: 0 4px 20px 0 rgb(0 0 0 / 5%);*/
		z-index: 999;
		/*border: 1px solid #CCCCCC;*/
		border-radius: 10px;
		margin-top: 30px;
		padding: 8px 8px;
		margin-left: -130px;
	}

	.anna-code>img {
		/*  width: 180px;*/
		width: 100%;
		border-radius: 10px;
	}

	.anna-code>p {
		font-size: 13px;
	}

	.mockTest {
		/* background: #5a5288; */
		border-radius: 20px;
		padding: 2px 5px;
		cursor: pointer;
		caret-color: transparent;
	}

	.mockTest2 {
		background: #567faf;
		border-radius: 20px;
		padding: 2px 5px;
		cursor: pointer;
		caret-color: transparent;
	}

	input:focus {
		outline: none;
	}

	.close_a {
		position: absolute;
		bottom: 46px;
		left: 43%;
		font-size: 20px;
		color: #7c7878;
		text-decoration: underline;
		text-underline-offset: 5px;
	}

	.close-btn {
		color: white !important;
		width: 100px;
		position: absolute;
		top: -66px;
		left: 664px;
		font-size: 50px !important;
		background-color: transparent !important;
		border: 0 !important;
		outline: none;
	}

	.close-btn2 {
		display: inline-block;
		padding: 0px 3px;
		color: white;
		position: absolute;
		font-size: 38px;
		background-color: transparent !important;
		border: 0 !important;
	}

	.oralMockTable {
		width: 88%;
		max-width: 100%;
		font-size: 14px;
		margin: auto;
		margin-top: 18px;
	}

	.oralMockTable th {
		background-color: #e3e7eb;
	}

	.oralMockTable th,
	.oralMockTable td {
		border: 1px solid #bdbbbb;
		padding: 8px;
		line-height: 1.42857143;
		vertical-align: top;
		text-align: center;
	}

	.oral_mock_btn {
		background-image: linear-gradient(90deg, #ff8d80 0%, #ff574d 100%);
		border: 0;
		color: white;
		padding: 0px 11px;
		border-radius: 6px;
		cursor: pointer;
	}

	.oral_sSubjects #navigationBar {
		margin-top: 1px !important;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
	}

	.single-g-text {
		display: flex;
		align-self: center;
		color: white;
		font-weight: bold;
		font-size: 18px;
		margin-left: 25px;
	}

	.banner_css {
		border-radius: 6px;
		margin: 20px 15px 20px 15px;
		cursor: pointer;
		width: 320px;
		height: 320px;
		align-content: center;
	}

	#jqmeter-container,
	#jqmeter-container2 {
		width: 95%;
		height: 13px;
		margin: 0 auto;
	}

	.therm {
		max-width: 100%;
	}

	.therm span {
		color: red !important;
		font-size: 14px !important;
		float: right;
		margin-top: -38px;
		margin-right: 5px;
		padding: 0 !important;
	}

	.inner-therm-title {
		position: absolute;
		margin-left: 10px;
		margin-top: -24px;
	}

	.single-content-card-bottom-in span {
		height: fit-content;
	}
</style>